<script>
import { h } from 'vue'
import APopup from './APopup.vue'
import AScrollable from './AScrollable.vue'

export default {
    name: 'ADropdown',
    components: { APopup, AScrollable },
    emits: ['update:popShown'],
    props: {
        popShown: {
            type: Boolean,
            default: null
        },
        /**
         * 对齐到target的方式
         */
        popPlacement: {
            type: String,
            default: 'bottom'
        },
        popModifiers: {
            type: Array,
            default: []
        },
        getPopModifiersFunc: {
            type: Function,
            default: null
        },
        useTargetWidth: {
            type: Boolean,
            default: false,
        },
        maxHeight: {
            type: Number,
            default: null
        },
        trigger: {
            type: String,
            default: 'click'
        },
    },
    data() {
        return {
            innerPopShown: false
        }
    },
    computed: {
        myPopShown() {
            if (this.popShown != null) {
                return this.popShown
            }
            return this.innerPopShown
        }
    },
    render() {
        let popRender = null
        if (this.maxHeight > 0) {
            popRender = h(AScrollable, {
                style: {
                    maxHeight: `${this.maxHeight}px`
                },
            }, { default: this.$slots.pop })
        } else {
            popRender = this.$slots.pop()
        }

        return h(APopup, {
            popShown: this.myPopShown,
            'onUpdate:popShown': value => this.updatePopShown(value),
            popPlacement: this.popPlacement,
            popModifiers: this.popModifiers,
            getPopModifiersFunc: this.getPopModifiersFunc,
            trigger: this.trigger,
            escToClose: true,
            ref: 'popup'
        }, {
            default: this.$slots.default,
            pop: () => popRender
        })
    },
    watch: {
        myPopShown(val) {
            if (val) {
                this.onPopShown()
            }
        }
    },
    methods: {
        showPop() {
            this.innerPopShown = true
            this.$emit('update:popShown', true)
        },
        hidePop() {
            this.innerPopShown = false
            this.$emit('update:popShown', false)
        },
        getTargetEl() {
            return this.$refs.popup.getTargetEl()
        },
        getPopEl() {
            return this.$refs.popup.getPopEl()
        },
        updatePopShown(value) {
            if (value) {
                this.showPop()
            } else {
                this.hidePop()
            }
        },
        onPopShown() {
            if (!this.useTargetWidth) {
                return
            }
            this.$nextTick(() => {
                let popEl = this.getPopEl()
                if (!popEl) {
                    return
                }

                let targetEl = this.getTargetEl()
                let targetRect = targetEl.getBoundingClientRect()
                popEl.style.width = targetRect.width + 'px'
            })
        }
    }
}
</script>